<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.fr{
			float: right;
		}
		.fl{
			float: left;
		}
		/*清理浮动*/
		header:after,.wrapperfirst:after,.wrappersecond:after,.wrapperthree:after{
			content: "";
			height: 0px;
			display: inline-block;
			clear: both;
		}
		/*清样式*/
		html body{
			padding: 0px;
			margin: 0px;
		}
		.ul1{
			list-style: none;
		}
		.ul1 a{
			text-decoration: none;
			color: black;
		}
		header{
			width: 1920px;
			height: 120px;
			background-color: #f6fbfc;
		}
		/*扩大图标*/
		.imglogo{
			width: 208px;
			height: 84px;
		}
		/*对图标进行操作*/
		.frist{
			margin-left: 216px;
			margin-top: 19px;
		}
		.second{

			margin-right: 139px;
			/*margin-top: 48px;*/
			padding-top:35px;
		}
		.ul1>li{
			padding-left: 65px;
		}
		/*对中间图片进行改动*/
		.imgbanner{
			width: 1920px;
			height: 610px;
		}
		/*设置版心样式*/
		.wrapper{
			margin: 0 auto;
			width: 1351px;
			height: 1202px;
			border-bottom: 1px dashed gray;
		}
		/*设置总背景*/
		.headWrapper{
			width: 1920px;
			height: 1219px;
		}
		.wrapperfirst{
			width: 1351px;
			height: 201px;
			/*border-bottom: 1px dashed gray;*/
			/*固定盒子大小*/
			box-sizing: border-box;	
			position: relative;
		}
		.p1{
			text-align: center;
			line-height: 201px;
			color: #9c9c9c;
			font-size: 30px;
		}
		.imgminixon{
			width: 83px;
			height: 73px;
			position: absolute;
			left:1270px;
			top:30px;
		}
		.leftline{
			margin: 0px;
			padding: 0px;
			border: 0.1px solid #BFD193;
			width: 590px;
			height: 0.5px;
		}
		.rightline{
			margin: 0px;
			padding: 0px;
			border: 0.2px solid #BFD193;
			width: 590px;
			height: 0.5px;
		}
		.p2{
			font-size: 30px;
			/*font-weight: bold;*/
			text-align: center;
			position: relative;
			top:-58px;
		}
		.wrappersecond{
			width: 1351px;
			height: 310px;
			/*border: 1px solid #000;*/
			margin-top: 45px;
		}
		.wrappersecond-first{
			width: 448.3px;
			height: 310px;
			/*border: 1px solid #000;*/
			text-align: center;
			/*padding-right: 39px;*/
		}
		.img01{
			width: 141px;
			height: 135px;
		}
		.p3{
			font-size: 30px;
			color: gray;
		}
		.p4{
			color: gray;
			line-height: 28px;
		}
		.wrapperthree{
			width: 1351px;
			height: 407px;
			/*border: 1px solid #000;*/
			margin-top:117px;
		}
		.wrapperthree-first{
			width: 705px;
			height: 290px;
			/*border: 1px solid #000;*/
		}
		.p5{
			color: #66666A;
			line-height: 10px;
			font-size: 25px;
		}
		.p6{
			line-height: 10px;
			font-size: 20px;
			color: #66666A;
		}
		.p7{
			font-family: "微软雅黑";
			line-height: 30px;
			text-indent: 38px;
			padding-left: 18px;
		}
		.p8{
			color: #4c6f09;
			position: relative;
			top:-50px;
			padding-left: 18px;
		}
		.imgmoreicon{
			width: 20px;
			height: 13px;
			position: relative;
			top:-28px;
			left:-5px;
		}
		.spanP5{
			color: #6d7309;
		}
		.imgprofile{
			width: 469px;
			height: 415px;
		}
		.up{
			background-color: #d1a42a;
			width: 8px;
			height: 23px;
		}
		.down{
			background-color: #d6ee74;
			width: 8px;
			height: 40px;
		}
		.pillars{
			position: relative;
			top:14px;
			padding-right: 10px;
		}
	</style>
</head>
<body>
	<!-- 头部 -->
	<header>
		<!-- 两个块，一个左悬浮，一个右悬浮 -->
		<div class="fl frist">
			<img src="css/logo.png" alt="" class="imglogo">
		</div>
		<div class="second">
			<ul class="ul1">
				<li class="fr"><a href="#">HOME</a></li>
				<li class="fr"><a href="#">走进尚典</a></li>
				<li class="fr"><a href="#">新闻动态</a></li>
				<li class="fr"><a href="#">典尚视频</a></li>
				<li class="fr"><a href="#">产品中心</a></li>
				<li class="fr"><a href="#">授权查询</a></li>
				<li class="fr"><a href="#">联系我们</a></li>
			</ul>
		</div>
	</header>
	<!-- 中间图片部分 -->
	<img src="css/banner.png" alt="" class="imgbanner">
	<div class="headWrapper">

		<!-- 先弄一个版心出来，剩下来的内容全在版心 -->
		<div class="wrapper">
			
			<div class="wrapperfirst">
				
				<p class="p1">SHANGDIAN CONCEPT</p>
				<img src="css/minixon.png" alt="" class="fr imgminixon">
				
			</div>
			
				<!-- 用两个div来代替实线 -->
				<div class="leftline">
				</div>
				
				<div class="rightline fr">
				</div>

				<p class="p2">尚典理念</p>
			

			<div class="wrappersecond">
				
				<div class="wrappersecond-first fl">
					<img src="css/01.png" alt="" class="img01">
					<p class="p3">为什么这么做？</p>
					<p class="p4">这几年来市面上的洗发水都是以硅油为主研发而成 洗发水含有硅会使人脱发、掉发、头皮发痒等</p>
				</div>
				<div class="wrappersecond-first fl">
					<img src="css/02.png" alt="" class="img01">
					<p class="p3">我们做了什么？</p>
					<p class="p4">研制出一款无硅油洗护产品，塑造纯天然，原生态 产品，致力打造健康，美丽的核心宗旨</p>
				</div>
				<div class="wrappersecond-first fl">
					<img src="css/03.png" alt="" class="img01">
					<p class="p3">我们是谁？</p>
					<p class="p4">“尚典”诞生于2016年中国广州，是香港闻名生物科 技有限公司旗下的一个品牌</p>
				</div>
				
			</div>

			<!-- 尾部 -->
			<div class="wrapperthree">
				<!-- 再来两个div，一个包图片，一个包文字 -->
				<!-- 文字左浮动 -->
				<div class="wrapperthree-first fl">
					<div class="pillars fl">
						<!-- 用于小柱子 -->
						<div class="up">
							
						</div>
						<div class="down">
							
						</div>
					</div>
					<div class="fl">
						<p class="p5"><span class="spanP5">尚典&nbsp;&nbsp;/</span>&nbsp;&nbsp;公司简介</p>
						<p class="p6">SHANGDIAN PROFILE</p>
					</div>
					<!-- 专门用来清浮动 -->
					<div style="clear: both;">
						
					</div>
					<p class="p7">“尚典”诞生于2016年中国广州，是香港闻名生物科技有限公司旗下的一个品牌。公司集开发、生产、销售为一体，塑造天然，原生态产品，致力打造健康，美丽的核心粽子。同时也为移动互联网低门槛创业创造一个平台，支持有梦人士创业，实现梦想的舞台。</p>
					<p class="p7">公司以“品质第一，服务第一，团队第一”的企业宗旨，坚持“以健康为本，带来天然植物、健康、原生态产品”的品牌理念，屏籍“用于探索，敢于拼搏”的企业精神，以市场为导向，以消费者为核心，研发销售美容洗护精品，在行业中拥有极好的声誉。</p>
					<p class="p8 fr">MORE</p>
					<img src="css/moreicon.png" alt="" class="imgmoreicon fr">
					
				</div>

				<img src="css/profile.png" alt="" class="imgprofile fr">


			</div>


		</div>		
	</div>
</body>
</html>